<template>
  <view class="container">
    <!-- 顶部 -->
     <view class="top" :style="{ height: topHeight + 'px' }">
      <text>医院名称</text>
    </view>


    <!-- 背景 -->
    <view class="background">
      <view class="card">
        <view class="city">
          <view class="city-item">济源市仁新医院</view>
          <view class="city-card">电子就诊卡</view>
          <image style="height: 78px;width: 180px;" alt="图片" src="/static/back.png"/>
        </view>
        <view class="inner">院内就诊ID号： 1</view>
      </view>

      <view class="intruduce">
        <!-- 预约挂号 -->
        <view class="intruduce-item" @click="look">
          <image alt="图片" src="/static/home1.png" />
          <view class="show">预约挂号</view>
          <view class="look">实时查看医生情况</view>
        </view>
        <!-- 预约记录 -->
        <view class="intruduce-item" @click="record">
          <image alt="图片" src="/static/home2.png" />
          <view class="show">预约记录</view>
          <view class="look">快速查看预约情况</view>
        </view>
        <!-- 线上缴费 -->
        <view class="intruduce-item" @click="pay">
          <image alt="图片" src="/static/home3.png" />
          <view class="show">线上缴费</view>
          <view class="look">快速缴费不排队</view>
        </view>
      </view>
    </view>

    <!-- 门诊 -->
    <view class="outpatient">
      <view class="doors">
        <view class="door-line"></view>
        <view class="door-font">
          <text>门诊</text>
        </view>
      </view>
      <view class="door-items">
        <view class="door-item" @click="add">
          <image alt="图片"  src="/static/home4.png"/>
          <view class="item-font">添加就诊人</view>
        </view>
        <view class="door-item" @click="querys">
          <image alt="图片"  src="/static/home5.png"/>
          <view class="item-font">报告查询</view>
        </view>
        <view class="door-item" @click="paycode">
          <image alt="图片"  src="/static/home6.png"/>
          <view class="item-font">缴费记录</view>
        </view>
      </view>
    </view>

    <!-- 住院 -->
    <view class="liveHouse">
      <view class="doors">
        <view class="door-line"></view>
        <view class="door-font">
          <text>住院</text>
        </view>
      </view>
      <view class="live-items">
        <view class="door-item" style="margin-left:-20px;position: fixed;" @click="personMess">
          <image alt="图片"  src="/static/home7.png"/>
          <view class="item-font">住院人信息</view>
        </view>
        <view style="margin-left:100px;position: fixed;" class="door-item" @click="datepay">
          <image alt="图片"  src="/static/home8.png"/>
          <view class="item-font">住院日清单</view>
        </view>
      </view>
    </view>

    <!-- 底部导航栏 -->
    <view class="bottom">
      <view class="bottom-item" @click="goto">
        <image alt="首页" src="/static/icon1(1).png"/>
        <text style="color: #00DACA;">首页</text>
      </view>
      <view class="bottom-item" @click="hospital">
        <image alt="医院信息" src="/static/icon2.png"/>
        <text>医院信息</text>
      </view>
      <view class="bottom-item" @click="family">
        <image alt="专家榜" src="/static/icon3.png" />
        <text>专家榜</text>
      </view>
      <view class="bottom-item" @click="can">
        <image alt="消息" src="/static/icon4.png"/>
        <text>消息</text>
      </view>
      <view class="bottom-item" @click="my">
        <image src="/static/icon5.png" alt="我的" />
        <text>我的</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref ,onMounted} from 'vue';
const topHeight = ref(0);  // 用于存储动态计算的top高度

  // 在组件挂载时获取设备信息
  onMounted(() => {
    const systemInfo = uni.getSystemInfoSync();
    const navBarHeight = systemInfo.statusBarHeight;  // 获取状态栏的高度
    topHeight.value = navBarHeight + 44;  // 导航栏高度加50px
    console.log('导航栏高度:', navBarHeight);
    console.log('动态计算的top高度:', topHeight.value);
  });
const look = () => {
  // 添加就诊人页面跳转
  uni.reLaunch({
    url: '/pages/list/list'  // 请根据实际路径修改
  });
};

const record = () => {
  // 预约记录
};

const pay = () => {
  // 线上缴费
};

const add = () => {
  // 添加就诊人页面跳转
  uni.reLaunch({
    url: '/pages/add/add'  // 请根据实际路径修改
  });
};

const querys = () => {
  // 报告查询
};

const paycode = () => {
  // 缴费记录
};

const personMess = () => {
  // 住院人信息
};

const datepay = () => {
  // 住院日清单
};

const goto = () => {
  // 首页
};

const hospital = () => {
  // 医院信息
};

const family = () => {
  // 专家榜
};

const can = () => {
  // 消息
};

const my = () => {
  // 我的
};
</script>

<style scoped>
.container {
  background-color: aliceblue;
}

/* 顶部样式 */
.top {
  background-color: #00daca;
  width: 100%;
  height: 5rem;
  color: white;
  font-size: 21px;
  line-height: 3rem;
  font-weight: 600;
  display: flex;
  justify-content: center; /* 水平居中 */
  text-align: center;
}
.top>text{
	margin-top: 30px;
}


/* 背景 */
.background {
  background-image: url();
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 25vh;
  position: relative; /* 调整为relative来避免重叠 */
  margin-bottom: 150px; /* 留出足够的空间给下方卡片 */
}

/* 第一张卡片 */
.card {
  width: 92%;
  height: 77px;
  background-color: white;
  margin-left: 4%;
  margin-top: 15px;
  border-radius: 10px;
  position: relative;
  z-index: 10;
}

.city {
  display: flex;
  margin-top: 8px;
  margin-left: 10px;
  justify-content: space-between;
}

.city-item {
  margin-top: 10px;
  color: #00a89b;
  font-weight: 500;
  font-size: 17px;
  width: 40%;
  white-space: nowrap;  /* 强制文本不换行 */
}


.city-card {
  color: #00a89b;
  border: 1px solid #00a89b;
  font-size: 14px;
  min-width: 80px;
  height: 22px;
  text-align: center;
  margin-left: 20px;
  margin-top: 10px; 
  line-height: 22px;
  z-index: 10;
  white-space: nowrap;
}





/* 院内就诊id号 */
.inner {
  margin-top: -45px;
  margin-left: 12px;
  font-size: 14px;
  color: #00a89b;
}

/* 预约挂号三个图标 */
.intruduce {
  margin-top: 10px;
  width: 92%;
  height: 123px;
  margin-left: 4%;
  background-color: white;
  display: flex;
  justify-content: space-between;
  border-radius: 10px;
}

.intruduce-item {
  width: 30%;
  margin-left: 10px;
  margin-top: 15px;
  text-align: center;
}

.intruduce-item image {
  width: 39px;
  height: 43px;
}

.show {
  font-size: 15.5px;
  color: #323232;
}

.look {
  font-size: 14px;
  margin-top: 3px;
  color: #808080;
  white-space: nowrap;
}

/* 门诊 */
.outpatient {
  margin-top: -120px;
  width: 92%;
  height: 123px;
  margin-left: 4%;
  background-color: white;
  position: relative;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.doors {
  display: flex;
  margin-top: 14px;
  margin-left: 15px;
}

.door-line {
  width: 2px;
  height: 18px;
  background-color: #00daca;
  margin-top: 12px;
}

.door-font {
  margin-left: 10px;
  font-size: 22px;
  margin-top: 5px;
  color: #4f4f4f;
  font-weight: 700;
  
}

.door-items {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}

/* 住院 */
.liveHouse {
  margin-top: 10px;
  width: 92%;
  height: 123px;
  margin-left: 4%;
  background-color: white;
  position: relative;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.live-items {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  margin-left: 7%;
}

.door-item {
  text-align: center;
  width: 28%;
}

.door-item image {
  width: 35px;
  height: 35px;
}

.item-font {
  font-size: 13px;
}

/* 底部导航栏 */
.bottom {
  width: 100%;
  height: 60px;
  background-color: #ffffff;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #e6e6e6;
}

.bottom-item {
  text-align: center;
  font-size: 12px;
  color: #7d7d7d;
}

.bottom-item image {
  width: 30px;
  height: 30px;
  vertical-align: middle; /* 图片垂直居中 */
}

.bottom-item text {
  display: block;
  margin-top: 5px; /* 给文字留些空间 */
}
</style>
